/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  IconArrowRight,
  Input,
  Select,
  CheckSwitch,
  LineColumn,
  SuffixInput, InputLine,ComboBoxDatalist, InputDatalist,
  CommitInput
} from "customize-easy-ui-component";
//import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
// import {useCommnBaseParm, CommnBase} from "./CommnBase";
import {useContext, useRef} from "react";
import {ChooseEqps} from "../../comp/ChooseEqps";
import useFlowToMutation from "../hook/useFlowRequestMutation";
import {OneUserChoose} from "../../common/user/OneUserChoose";
import RoutingContext from "../../routing/RoutingContext";
import {使用状态s} from "../../pipeline/edit/管道单元";
import UserContext from "../../routing/UserContext";
import {ChooseUnit} from "../../unit/ChooseUnit";
// import HashLinkObserver from "react-hash-link";

// export const 设备单位关联类型s=[['useu','使用单位'],['owner','产权单位'],['mtu','维保单位']];

interface Props {
  // id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前申请单数据
  req?:any;
  //去修改设备数据
  //setEqp:  React.Dispatch<React.SetStateAction<any>>;
  //graphQL的变更执行回调函数 (...args: any[]) => any
  mutationFunc: (...args: any[]) => any;
    curFlow?:any;
}
/** 设备状态变更管理：申请单。
 * 【最后要发给各个监察平台】跨域限制访问，其实是浏览器的限制。多个平台复杂性，推送哪些数据，什么情况算真正结束我方的这个申请单流程啊？监察还得有应答通知机制。
 * 只需要管辖到检验机构审核者这一关有审核通过即可以说本申请单的作用结束了，没必要关注后续监察平台实际动作有没有执行？申请单本平台批准人批准完成，就能END了。后续算作协同操作的追溯跟踪目的。
 * 无法查询各个监察平台的操作历史结果，只能等待反馈？消息。zeebe:ManualTask：消息驱动任务，超时自动申请单流程图结束处置。
 * 电梯使用单位发起申请的：提交代理的检验机构前台？或者直接让代理的检验机构日常对接检验的某个检验员创建申请，领导审核，送监察机构，监察消息反馈，结束。
 * 前提假定：检验机构每个部门都最少一个人负责审批状态变更申请单，创建人部门，设备归属部门不限死，有个人有资格做审核的角色：“监察相关前置审核1(状态变更)”。
 * 前端人员选择对话框{可过滤权限角色}选某人后{配置为某一节点人物}，给后端，后端要依照申请单的类型+当前所处节点，验证角色需求，zeebe流程流转合法？
 * 审核人的责任：【假定需要】审核人负责上一步的合法合规审查，避免前端代码的漏洞：比如请假5天需要3级审查不能用请假1天的1级审查建议步骤完成，这个后端不控制的只能再业务层面审查管制。
 * */
export const EqpOpenclose: React.FunctionComponent<Props> = (
    {
       readOnly,
       editable,
       req=null,    //【只读的】:从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
      mutationFunc,
        curFlow,
     }) =>
{
  //这个位置就应该体现解析graphQL内省的json集合字段：data:{}从string变身对象。
  const theme = useTheme();
    const { history } = useContext(RoutingContext);
  const {save, field, reurl}= window.history.state?.state??{};      //通用伪对话框传递格式:多选设备返回对象
    //假如从多选选定设备页面返回的："移出多选集" : "加入多选集" 操作过后，将会导致save.devs[]对象变身成了设备页面的经过SessionStorage倒腾一手的对象。
  const edt = save?  save : req;
  //若从save恢复的，confirm已经解析为对象Object:
  const  dat = edt?.dat instanceof Object?  edt?.dat : JSON.parse(edt?.dat || '{}');
  const [理由, set理由] = React.useState(dat?.理由);
  //【琢磨】仅仅存在于短期流程活动使用的需要结构化吗？成本和收益对比？,本来应当是关联对象的却被非结构化，graphQL没办法内省的，片段快照某些关键字段？？
    //非结构化关联对象的和正常JPA关联对象的优缺点对照： 前者适合于频繁新增删除的，关系生存时间短暂的，后端基本不参与计算的。
    //因为ChooseEqps对话框选择设备之后返回的实际数据字段通常是save.devs而不是我这非结构化json存储到了dat:{devs{[]}}，所以需要转换 #前提条件save?.devs表示挑选设备列表伪对话框之后调回来的。
    const [devs, setDevs] = React.useState(save?.devs? save.devs : dat?.devs);
    // const [unitZd, setUnitZd] = React.useState(dat?.unitZd || 'useu');
    //因为servu为对方框原本预计并非是在dat{servu:{}}这个结构里面的# 只好这样转换了 save? save.devs : 多个为对话框的混淆逻辑问题 【预设不应该有dat{}非结构化】
    //注意@前提：假定save.servu必须时选择了单位从伪对话框返回的。
    // const [servu, setServu] = React.useState(save?.servu? save.servu : dat?.servu);
    const [ust, setUst] = React.useState(dat?.ust);

  async function confirmation() {
    //前面垫底加了newdat={ ...req,  导致；id字段在XxxInput并没有定义，报错！输入和输出模型不能交换。
    const newdat={
      dat: {
          理由, devs, ust
        },
    };
    //伪对话框跳转恢复也会用到的。
    return newdat;
  }
  //console.log("ChooseUnit跑来8history=",history, "location==",history.location);
/* const mountedRef = useRef(false);
  if(!mountedRef.current) {
    console.log("电梯Z组件当前id=",id,"未初始化￥=",mountedRef.current);
    mountedRef.current = true;
  }
  else   console.log("电梯Z组件当前id=",id,"已经初始化了=",mountedRef.current);*/

  // console.log("电梯组件传递x参数来svp Nowneqp=",req, "save=",save, cbp);
    const {call:flowToFunc,doing:flowing, called:flowed, reset:flowreset}=useFlowToMutation();
    //流转可能遇见两个人物：auditor审核人 或者 dispatcher最终责任人
    const [auditor, setAuditor] = React.useState<any>(req?.auditor);
    const {user} = useContext(UserContext);
    const  audat = JSON.parse(edt?.audat || '{}');
    const [memo, setMemo] = React.useState<string|undefined>(audat?.memo);

  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        设备状态变更:报停/重新启用等。
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >
                <Text variant="h6">第一步，提交材料:</Text>
                <LineColumn >

                  <InputLine label={`理由:`}>
                    <CommitInput  value={ 理由 || ''}  onSave={txt => set理由( txt || undefined) } />
                  </InputLine>
                  <InputLine label={`多个设备挑选(快照模式):`}>
                    <ChooseEqps  field={'devs'}  jsoned={true}
                                 autoFocus={field==='devs'}
                                 onSetEqps={(all) => { setDevs(all) }}
                                 onDialog={async () => { return await confirmation() } }
                                 devices={devs}
                              /*   orgDevs= dat?.devs */
                                 orgDevs={edt?.devs  as any}
                                 edit={true} />
                  </InputLine>
                    <InputLine label={`将变更成的使用状态:`}>
                        <Select inputSize="md"  value={ ust || ''}
                                onChange={e => setUst( e.currentTarget.value||undefined ) } >
                            { 使用状态s.map(([enumv,title],i) => (<option key={i} value={enumv}>{title}</option> )) } </Select>
                    </InputLine>

                 </LineColumn>

                {
                    (req?.status==='INIT') &&
                      <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                              css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                              disabled={req?.status !== 'INIT'}
                        onPress={ async () => {
                          const sendInp=await confirmation();
                          const inpDevs=sendInp.dat.devs?.map((a: any)=>{return {id:a?.id,cod:a?.cod,oid:a?.oid,
                            crDate:a?.crDate
                          };});
                          const inpPreare={ ...sendInp,
                              dat: JSON.stringify({...sendInp.dat, devs:inpDevs}),
                          };
                          await mutationFunc(req?.id, 'UPD', inpPreare);
                        } }
                      > 先保存申请资料
                      </Button>
                }
            </div>

              <Text variant="h6">第二步，审核人审核情况：</Text>

              <InputLine label={('审核人') +`(点击进入选择):`}>
                  <OneUserChoose name={auditor?.person?.name!} setEditorVar={setAuditor}
                                 oobj={auditor}/>
              </InputLine>
              {  ((curFlow && curFlow?.entId === req?.id) || req?.status!=='INIT') &&
                  <InputLine label={`审核人的意见:`}>
                      <CommitInput  value={ memo || ''}  onSave={txt => setMemo( txt || undefined) }
                                    placeholder="如果拒绝或回退的，请给出理由"
                      />
                  </InputLine>
              }

              { (curFlow?.entId === req?.id && curFlow?.tdId==='request_auditor_opinion' || req?.status==='INIT') &&
                  <>
              <Button intent="primary" disabled={curFlow && !(curFlow?.entId === req?.id)}
                      onPress={async () => {
                          const opndat= req?.status==='INIT' ? '' :
                                            JSON.stringify({memo,});

                          await flowToFunc(curFlow?.utId, req?.id,3,opndat, "YES","设备状态变更:"+user?.person?.name,
                              auditor?.id, '/request/'+ req?.id, 30);
                          // toast({title: "流转前进一步"});
                          //签字成功与否，都将可直接清空session状态; 不支持并发进行多个审批单子或多份报告同时进入审核工作范围。一个时间点只能一条审批事项。
                          sessionStorage['审批单'] = null;
                          history.push(`/zeebeTodo`);     //实际并不会等待后端的响应的，直接跳转URL的。# await flowToFunc并不会阻塞到应答
                      }}
              >
                  {req?.status==='INIT' ? ((curFlow?.tdId==='request_author_modify')? '再提交申请' : '提交申请给审核人') :
                                          '通过的流转下步'}
              </Button>
              {
                  (req?.status!=='INIT') &&
                  <>
                      <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                              disabled={curFlow && !(curFlow?.entId === req?.id)}
                              onPress={async () => {
                                  const opndat=JSON.stringify({memo,});
                                  await flowToFunc(curFlow?.utId, req?.id,3,opndat, "NO","设备状态变更:"+user?.person?.name,
                                      auditor?.id, null, 30);
                                  // toast({title: "流转前进一步"});
                                  //签字成功与否，都将可直接清空session状态; 不支持并发进行多个审批单子或多份报告同时进入审核工作范围。一个时间点只能一条审批事项。
                                  sessionStorage['审批单'] = null;
                                  history.push(`/zeebeTodo`);     //实际并不会等待后端的响应的，直接跳转URL的。# await flowToFunc并不会阻塞到应答
                              }}
                      >
                          {(curFlow?.tdId==='request_auditor_opinion')? '审批不通过' :
                                              '否定结论'}
                      </Button>
                      <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                              disabled={curFlow && !(curFlow?.entId === req?.id)}
                              onPress={async () => {
                                  const opndat=JSON.stringify({memo,});
                                  await flowToFunc(curFlow?.utId, req?.id,3,opndat, "BACK","设备状态变更:"+user?.person?.name,
                                      auditor?.id, null, 30);
                                  //为何点一次：后端跑了2回？？ 而且接口没保存memo?
                                  sessionStorage['审批单'] = null;
                                  history.push(`/zeebeTodo`);     //实际并不会等待后端的响应的，直接跳转URL的。# await flowToFunc并不会阻塞到应答
                              }}
                      >
                          { '退回' }
                      </Button>
                  </>
              }
                  </>
            }

            { (curFlow?.entId === req?.id && (curFlow?.tdId==='request_deny' || curFlow?.tdId==='request_finish')) &&
              <Button intent="primary" disabled={curFlow && !(curFlow?.entId === req?.id)}
                      onPress={async () => {
                          await flowToFunc(curFlow?.utId, req?.id,3,'', "YES");
                          sessionStorage['审批单'] = null;
                          history.push(`/zeebeTodo`);
                      }}
              >
                {'知道了'}
              </Button>
            }
              <Text variant="h6">台账更新需要提交监察平台，所以基本完成还需监察那边确认处理后，才能真正算申请单使命结束。</Text>
          </Container>
        </div>
      </div>

    </div>
  );
};


